<template>
    <div>
        <div class="case-desc">
            <p>饼图的半径可以通过 series.radius 设置，可以是诸如 '60%' 这样相对的百分比字符串，或是 200 这样的绝对像素数值。当它是百分比字符串时，它是相对于容器宽高中较小的一条边的。</p>
        </div>
        <div class="case-code-container">
            <div id="pie-case-2" class="chart-container">

            </div>
            <highlightjs class="code" lang="js" :code="code"></highlightjs>
        </div>
    </div>
</template>

<script setup>
    import { code } from './code/case2.js';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('pie-case-2');
        const myChart = echarts.init(dom, 'dark', { renderer: 'svg' });

        // 绘制图表
        /** @type {echarts.EChartsOption} */
        const option = {
            title: { text: '饼图样式设置' },
            tooltip: {},
            // ★★★不再需要配置坐标轴
            series: [
                {
                    name: '进入来源',
                    type: 'pie',
                    radius: 50, // ★★★饼图的半径
                    // ★★★而是把数据名称和值都写在系列中
                    data: [
                        {
                            value: 335,
                            name: '直接访问',
                        },
                        {
                            value: 234,
                            name: '联盟广告',
                        },
                        {
                            value: 1548,
                            name: '搜索引擎',
                        },
                    ],
                },
            ],
        };
        myChart.setOption(option);
    });
</script>

<style lang="scss" scoped>

</style>
